<?php

/**
 * todayBing
 *
 * @package custom
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$data = getBingToday();
$cate = array_reverse($data['month']);
?>
<!DOCTYPE HTML>
<html lang="zh-cn">

<head><?php $this->need('header.php'); ?>
</head>

<body>
    <div class="container">
        <div class="columns">
            <!-- cover pc-only -->
            <div class="column col-4 px-0 hide-sm">
                <?php $this->need('cover-today.php'); ?>
            </div>
            <!-- page -->
            <div class="column col-8 col-sm-12 px-0">
                <!-- menu -->
                <div class="container p-0">
                    <?php $this->need('menu.php'); ?>
                </div>
                <!-- cont -->
                <div class="container">
                    <div class="columns">
                        <!-- left -->
                        <div class="column col-3 col-sm-3 px-0">
                            <div class="scroller-y" style="height: calc(100vh - 42px);">
                                <!-- bing logo -->
                                <div class="text-center">
                                    <img src="<?php $this->options->themeUrl('images/bing.webp'); ?>" style="width:100%;" class="c-hand" onclick="window.open('http://www.bing.com');" />
                                </div>

                                <!-- counter -->
                                <div class="columns -counter">
                                    <div class="column col-12 show-sm text-center">
                                        <span class="chip text-sec-gray">数据概览</span>
                                    </div>
                                    <div class="column col-6 col-sm-12">
                                        <div class="-info-viewer">
                                            <div class="text-center">
                                                <div class="big-val text-error"><?php echo $data['count']; ?></div>
                                                <div class=" desc">图片总计</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="column col-6 col-sm-12">
                                        <div class="-info-viewer">
                                            <div class="text-center">
                                                <div class="big-val text-error"><?php echo count($cate); ?></div>
                                                <div class=" desc">月份统计</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 列表 -->
                                <?php foreach ($cate as $key => $val): ?>
                                    <div
                                        class="cate-item" data-ym="<?php echo substr($val['datestr'], 0, 6); ?>"
                                        onclick="changeCate('<?php echo substr($val['datestr'], 0, 6); ?>')">
                                        <div class="hide-sm f1 m-2 text-ellipsis">
                                            <div class="d-flex a-center">
                                                <span class="mr-1 text-bold"><?php echo substr($val['datestr'], 4, 2); ?>月</span>
                                            </div>
                                            <div class="text-gray text-tiny hide-sm">
                                                <?php echo substr($val['datestr'], 0, 4); ?>年
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <div class="-icon -photo m-auto"></div>
                                            <div class="show-sm">
                                                <span>
                                                    <?php echo substr($val['datestr'], 2, 2) . '年' . substr($val['datestr'], 4, 2) . '月'; ?>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <!-- right -->
                        <div class="column col-9 col-sm-9 p-0">
                            <!-- page body -->
                            <div class="scroller-y" style="height: calc(100vh - 42px);">
                                <div class="block-space">
                                    <div class="pro-title">
                                        <div class="sub"><?php $this->title(); ?></div>
                                        <div class="main"><?php $this->slug(); ?></div>
                                    </div>
                                    <div class="bing-content" style="margin-bottom: 100px;">
                                        <?php $this->content(); ?>
                                    </div>
                                </div>
                                <div class="block-space">
                                    <div class="columns" id="datahere">loading...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <?php $this->need('footer.php'); ?>
    </div>
    <script>
        <?php
        $ym = isset($_GET['ym']) ? $_GET['ym'] : date('Ym');
        $mlist = getBingByMonth($ym);
        ?>
            (() => {
                let ym = getQueryParameter(location.href, 'ym')
                ym = ym ? ym : '<?php echo date('Ym'); ?>'
                const cateEles = document.querySelectorAll('.cate-item')
                for (let i = 0; i < cateEles.length; i++) {
                    if (cateEles[i].dataset.ym == ym) {
                        cateEles[i].classList.add('active')
                        break
                    }
                }
                let data = `<?php echo json_encode($mlist); ?>`
                data = JSON.parse(data.replace(/'/g,'~'))
                //console.log(data)
                let ele = document.querySelector('#datahere')
                if (!ele) {
                    throw ('no fount #datahere')
                    return
                }
                let html = '';
                for (let i = 0; i < data.length; i++) {
                    html += `<div class="column col-6 col-sm-12">
                                        <div class="bing-data-item">
                                            <div class="bg-image bing-data-img" style="background-image:url('${data[i].urlstr}');">
                                                <div class="d-flex a-center j-center bing-item-btns">
                                                <div class="-header-cover-item c-hand tooltip tooltip-top" data-tooltip="了解更多信息" onclick="window.open('${data[i].copyrightlink}');">
                                                    <div class="-icon -link"></div>
                                                </div>
                                                <div class="-header-cover-item c-hand tooltip tooltip-top" data-tooltip="下载这张图片" onclick="window.open('${data[i].urlstr}');">
                                                    <div class="-icon -download"></div>
                                                </div>
                                            </div> 
                                            </div>
                                            <div class="bing-item-date">${data[i].date_cn}</div>
                                            <div class="bing-item-title text-ellipsis">${data[i].title}</div>
                                            <div class="bing-item-copyright text-ell2line">${data[i].copyright}</div>                                    
                                        </div>
                                    </div>`
                }
                if (html === "") {
                    html = `<div class="column col-12">
                    <div class="text-center">
                        <div class="bg-image img-nodata col-mx-auto" style="width:60px;height:60px;"></div>
                        <div class="text-gray mt-2">暂无数据</div>
                    </div>
                    </div>`;
                }
                ele.innerHTML = html
            })({})

        function changeCate(ym) {
            location.href = '<?php echo $this->options->siteUrl . 'index.php/bing.html' ?>?ym=' + ym
        }

        function getQueryParameter(url, paramName) {
            const urlObj = new URL(url);
            const params = new URLSearchParams(urlObj.search);
            return params.get(paramName);

        }
    </script>
</body>

</html>